<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06-Vue生命周期钩子函数说明</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <button @click="fn">按钮</button>
    <button @click="destroy">销毁数据</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    const vm = new Vue({
      // el: '#app',
      // template:'<button>这是Vue实例中的template中的按钮标签</button>',
      data: {
        msg: 'hello'
      },
      methods: {
        add() {
          console.log('add方法...')
        },
        destroy(){
          // 销毁实例对象
          this.$destroy()
        },
        fn(){
          console.log(123)
        }
      },
      computed: {},
      watch: {},
      beforeCreate() {
        console.log('beforeCreate')
        // vm实例对象已经存在了
        console.log(this)
        // 为了能够确定的看到当前实例对象的状态，一定要加上一个debugger
        // 相当于是进入暂停状态，进行调试，所以在这个位置会中断(暂停)
        // debugger
      },
      created() {
        console.log('created...')
        console.log(this)
        // debugger
      },
      beforeMount() {
        // 虚拟DOM中的数据，在替换到页面之前
        console.log('beforeMount')
        document.querySelector('p').innerHTML = '哈哈哈哈哈哈'
        // debugger
      },
      mounted() {
        console.log('mounted...')
        // 此钩子函数的作用是将虚拟DOM中的数据替换到页面对应的区域
        // 我们可以在此处真正的来操作DOM了，但不推荐直接操作DOM
        // 在此可以发送请求，获取数据，设置定时器，订阅消息...注册事件...
        // debugger
      },
      beforeUpdate() {
        console.log('数据更新了...','beforeUpdate...')
      },
      updated() {
        console.log('更新完成了...')
        // 数据更新完成，可以将新的数据发送给服务器来进一步保存
      },
      beforeDestroy(){
        console.log('销毁开始...','beforeDestroy...')
        // 虽然可以在这里改变data中的数据，也就是可以改变vm上的属性值，但是页面并不会更新 
        this.msg = '即将销毁...'
        debugger
      },
      destroyed(){
        // 虽然说是实例销毁，但是实质上是上面的data属性值没有了，自定义的方法没有了，原生的事件依然可用，换句话说，就是相当于是灵魂没有了，没有气了，但是肉身还在
        // 此人生前那些财产还在，比如手机，汽车，电视...
        console.log('实例销毁...','destroyed...')
        console.log(this)
        debugger
      }
    })

    vm.$mount('#app')
  </script>
</body>
</html>